<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2022/8/16
  Time: 23:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>roomList</title>
    <!-- 通过cdn的方式引入，需要连网 -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="${pageContext.request.contextPath}/static/js/vue.min.js" type="text/javascript"></script>
    <!-- 解决浏览器生产提示信息 -->
    <script> Vue.config.productionTip=false </script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入vue.js -->
    <script src="${pageContext.request.contextPath}/static/js/jquery-2.1.1.min.js" type="text/javascript"></script>

</head>
<body>
<%--
    v-model双向数据绑定
    loadData是一个函数--%>
<div id="app">
    <center>
        <el-form :inline="true" :model="room" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="room.roomId" placeholder="查询房间"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadData" icon="el-icon-search" circle></el-button>
            </el-form-item>
        </el-form>
    </center>
    <%-- 增加房间添加按钮， openInsertWindow点击函数--%>
    <el-button type="primary" @click="openInsertWindow" icon="el-icon-circle-plus">新增房间</el-button>
    <br>
    <template>
        <el-table
        <%--:data="roomList"数据作用域，：表示属性，调用element.ui--%>
                :data="roomList"
                border
                style="width: 100%">
            <el-table-column
                    type="index"
                    label="序号"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="roomId"
                    label="房间id"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="roomType"
                    label="房间类型"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="roomPrice"
                    label="房间价格"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="roomState"
                    label="房间状态"
                    width="120">
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="openUpdateWindow(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle @click="deleteRoomByRoomId(scope.row.roomId)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <center>
            <%--element中的分页--%>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="room.page"
                        :page-sizes="[2, 5, 10]"
                        :page-size="room.size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalCount">
                </el-pagination>
            </div>
        </center>
    </template>
</div>
<script>
new Vue({
    el:'#app',
    data:{
        roomList:[],
        room:{
            page:1,
            size:5,
            roomId:""
        },
        //总条数
        totalCount:0
    },
    methods:{
        //打开一个新的页面进行修改操作
        openUpdateWindow(room){
            localStorage.setItem("updateRoom",JSON.stringify(room))
            //JSON.stringify () 方法能将一个 JavaScript 对象或值转换成一个 JSON 字符串。
            location.href = '${pageContext.request.contextPath}/openUpdateWindow'
        },
        deleteRoomByRoomId(roomId){
            if (confirm("你确定要删除"+roomId+"号房间吗")){
                var _this = this;
                $.ajax({
                    url:'${pageContext.request.contextPath}/room/deleteRoomByRoomId',
                    dataType:'json',
                    type:'post',
                    data:{
                        roomId:roomId
                    },
                    success:function (rs) {
                        if (rs.code==200){
                            _this.$alert(rs.msg+",2秒之后刷新");
                            setTimeout(function () {
                                location.reload();
                            },2000)
                        }else {
                            _this.$alert(rs.msg+",2秒之后刷新");
                            setTimeout(function () {
                                location.reload();
                            },2000)
                        }
                    },error:function () {
                        _this.$message("删除房间服务器错误！");
                    }
                })
            }
        },
        loadData(){
            var _this = this;
            $.ajax({
                url:'${pageContext.request.contextPath}/room/selectRoom',
                dataType: 'json',
                type: 'get',
                data:this.room,
                success:function (rs) {
                    _this.totalCount = rs.obj.total; // 总条数
                    _this.room.page = rs.obj.pageNum; // 当前页
                    _this.room.size = rs.obj.pageSize; // 页码大小
                    _this.roomList = rs.obj.list;// 数据
                },error:function () {
                    _this.$message("查询用户服务器出错了!");
                }
            })
        },
        handleSizeChange(newSize){
            this.room.size = newSize;
            this.loadData();
        },
        handleCurrentChange(newPage){
            this.room.page = newPage;
            this.loadData();
        },
        //增加房间
        openInsertWindow(){
            //重定向
            location.href='${pageContext.request.contextPath}/openInsertWindow'
        }
    },
    mounted(){
        this.loadData();
    }
})
</script>
</body>
</html>
